<template>
  <div class="w-[100%] h-[100%]">

    <div class="">
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="false" :show-export="false"
                   @query="handleSearchQuery"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="false"
        :show-section="false"
      >
        <template #img="{row}">
          <ImagePreview :src="row.img" width="50px" height="50px"/>

        </template>
      </QueryTable>

    </div>
  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import {GlobeStateVO, GlobeStateApi} from "@/api/setting/area";
import {getGlobeState, getGlobeStatePage} from '@/api/publicInterf'

const searchList: TradeOrderQueryVO[] = [
  {
    label: '地区',
    code: 'stateName',
    type: 'input',
  },
  {
    label: '语言',
    code: "language",
    type: 'input'
  }
]
const initQueryParams = {
  pageNo: 1, pageSize: 10
}


const th = ref([
  {
    name: '地区',
    code: 'stateName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '地区语言',
    code: 'language',
    type: 'date',
    search: true
  },
  {
    name: '币种简写',
    code: 'currency',
    search: false
  },
  {
    name: '币种符号',
    code: 'currencySymbol',
    type: 'numberRanger',
    search: true
  },
  {
    name: '国旗/区旗',
    code: 'img',
    search: false
  },
  {
    name: '汇率(外币兑本币）',
    code: 'exchangeRate',
    search: false
  },
  {
    name: '时区',
    code: 'date',
    search: false
  },
]);
const dataList = ref<GlobeStateVO[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {}

const selectedRow = ref<GlobeStateVO>({...initRow})

const isShowDialog = ref(false)

const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  queryList();
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  link({data}) {
    selectedRow.value = data.row;
    isShowDialog.value = true
  },
  pagination() {
    queryList();
  }
}

const queryList = async () => {
  let res = await getGlobeStatePage(queryParams.value);
  dataList.value = res.list || [];
  total.value = res.total;
}



onMounted(() => {
  queryList();
})

</script>
<style lang="scss" scoped>

</style>
